<template>
  <view>
    <button @click="selectImages">选择图片</button>
    <view class="image-list">
      <image v-for="(img, i) in images" :key="i" :src="img" class="image-item" />
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const images = ref([]);

const selectImages = () => {
  uni.chooseImage({
    count: 9 - images.value.length,
    success: (res) => {
      images.value = [...images.value, ...res.tempFilePaths];
      emit("select", images.value); // 将选中的图片传递给父组件
    }
  });
};

defineEmits(["select"]);
</script>

<style scoped>
.image-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
}

.image-item {
  width: 80rpx;
  height: 80rpx;
  object-fit: cover;
  border-radius: 10rpx;
}
</style>
